<script setup lang="ts">
import YkPagination from '@yk/components/pagination/YkPagination.vue'
import { Pages } from '@typings/pages'
import YkDatePicker from '@yk/components/date-picker/YkDatePicker.vue'
import { ElForm } from 'element-plus'
import { getNoticeListByPageAPI, readNoticeAPI } from '@/api/notice'
import { Message } from '@/api/entity/notice'
import { acceptOrRejectShareAPI, selfAcceptOrRejectShareAPI } from '@/api/share'
import { useAppStore } from '@/pinia'

defineOptions({ name: 'NoticeList' })
const appStore = useAppStore()

onMounted(() => {
  searchShareHandle()
  searchSystemHandle()
})

// region TODO 分享通知
// region TODO 查询
const searchShareParams = reactive({
  startTime: '',
  endTime: '',
  // 报警类型 0-系统消息 1-共享消息
  type: '1',
  // 是否已读 ture-已读
  status: null as boolean
})
function searchShareHandle () {
  sharePages.pageNum = 1
  getShareTableData()
}
// endregion

// region TODO 表格数据
const sharePages = reactive(new Pages())
const shareTableData = ref<Message[]>([])
function getShareTableData () {
  const loading = ElLoading.service()
  getNoticeListByPageAPI({
    ...sharePages.getParams(),
    param: searchShareParams
  }).then((res) => {
    res.result().then((rdata) => {
      shareTableData.value = rdata.records
      sharePages.total = rdata.total
    })
  }).finally(loading.close)
}
// endregion

// region TODO 接受或拒绝分享
// 设备
function acceptOrReject (id: string, index: number, status: boolean) {
  const loading = ElLoading.service()
  acceptOrRejectShareAPI({
    id,
    receiveStatus: status
  }).then(res => {
    res.result().then(() => {
      ElMessage.success(status ? '已接收' : '已拒绝')
      shareTableData.value[index].receiveStatus = status
    })
  }).finally(loading.close)
}

// 组态
function acceptOrRejectSelf (id: string, index: number, status: boolean) {
  const loading = ElLoading.service()
  selfAcceptOrRejectShareAPI({
    id,
    receiveStatus: status
  }).then(res => {
    res.result().then(() => {
      ElMessage.success(status ? '已接收' : '已拒绝')
      shareTableData.value[index].receiveStatus = status
    })
  }).finally(loading.close)
}
// endregion

// endregion

// region TODO 系统通知

// region TODO 查询
const searchSystemParams = reactive({
  startTime: '',
  endTime: '',
  // 报警类型 0-系统消息 1-共享消息
  type: '0',
  // 是否已读 ture-已读
  status: null as boolean
})
function searchSystemHandle () {
  systemPages.pageNum = 1
  getSystemTableData()
}
// endregion

// region TODO 表格数据
const systemPages = reactive(new Pages())
const systemTableData = shallowRef<Message[]>([])
function getSystemTableData () {
  const loading = ElLoading.service()
  getNoticeListByPageAPI({
    ...systemPages.getParams(),
    param: searchSystemParams
  }).then((res) => {
    res.result().then((rdata) => {
      systemTableData.value = rdata.records
      systemPages.total = rdata.total
    })
  }).finally(loading.close)
}
// endregion

// endregion

// region TODO 展开和已读
const expandRowKeys = shallowRef([])
// endregion
function tableExpandChangeHandle (msg: Message, expande: Message[]) {
  expandRowKeys.value = expande.map(item => item.id)
  if (msg.status) return
  readNoticeAPI({ id: msg.id }).then((res) => {
    res.result().then(() => {
      msg.status = true
    })
  })
  return true
}

</script>

<template>
  <div class="layout_view d-flex" style="min-height: 100%">
    <div class="c_card-page w-100 pt-8">
      <el-tabs>
        <el-tab-pane label="分享通知">
          <!--搜索表单-->
          <el-form inline class="c_form-search" @submit.prevent="searchShareHandle">
            <el-form-item>
              <yk-date-picker
                v-model:start="searchShareParams.startTime" v-model:end="searchShareParams.endTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
              />
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchShareParams.status" placeholder="是否已读">
                <el-option :value="null">全部</el-option>
                <el-option :value="true" label="已读" />
                <el-option :value="false" label="未读" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchShareHandle">查询</el-button>
            </el-form-item>
          </el-form>
          <!--表格-->
          <el-table
            :data="shareTableData" class="c_table-page" :expand-row-keys="expandRowKeys"
            row-key="id"
            @expand-change="tableExpandChangeHandle"
          >
            <el-table-column label="#" type="expand">
              <template #default="scope">
                <div class="px-20">
                  <span>{{ scope.row.content }}</span>
                  <div v-if="appStore.userInfo.id === scope.row.sharedId" class="mt-2">
                    <div v-if="scope.row.receiveStatus === null">
                      <!--接收设备-->
                      <template v-if="scope.row.targetType === '1'">
                        <el-button size="small" type="danger" plain @click="acceptOrReject(scope.row.id, scope.$index, false)">拒绝</el-button>
                        <el-button size="small" type="success" @click="acceptOrReject(scope.row.id,scope.$index,true)">同意</el-button>
                      </template>
                      <!--接收组态-->
                      <template v-else-if="scope.row.targetType === '2'">
                        <el-button size="small" type="danger" plain @click="acceptOrRejectSelf(scope.row.id, scope.$index, false)">拒绝</el-button>
                        <el-button size="small" type="success" @click="acceptOrRejectSelf(scope.row.id,scope.$index,true)">同意</el-button>
                      </template>
                    </div>
                    <div v-else>{{ scope.row.receiveStatus ? '已接受' : '已拒绝' }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="通知标题">
              <template #default="scope">
                <el-badge :is-dot="!scope.row.status" class="my-2 d-flex-center pr-2" style="height: 10px;">
                  <span>{{ scope.row.title }}</span>
                </el-badge>
                <!--<div class="overflow-line-clamp-2" :title="scope.row.dataSource">{{ scope.row.dataSource }}</div>-->
              </template>
            </el-table-column>
            <el-table-column label="通知时间" prop="createdAt" />
          </el-table>
          <!--分页-->
          <el-affix target=".c_table-page" position="bottom" :offset="0">
            <yk-pagination class="c_table-pagination-page" :pages="sharePages" @handle="getShareTableData" />
          </el-affix>
        </el-tab-pane>
        <el-tab-pane label="系统通知">
          <!--搜索表单-->
          <el-form inline class="c_form-search" @submit.prevent="searchSystemHandle">
            <el-form-item>
              <yk-date-picker
                v-model:start="searchSystemParams.startTime" v-model:end="searchSystemParams.endTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
              />
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchSystemParams.status" placeholder="是否已读">
                <el-option :value="null">全部</el-option>
                <el-option :value="true" label="已读" />
                <el-option :value="false" label="未读" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSystemHandle">查询</el-button>
            </el-form-item>
          </el-form>
          <!--表格-->
          <el-table
            :data="systemTableData" class="c_table-page" row-key="id"
            :expand-row-keys="expandRowKeys"
            @expand-change="tableExpandChangeHandle"
          >
            <el-table-column label="#" type="expand">
              <template #default="scope">
                <div class="px-20">{{ scope.row.content }}</div>
              </template>
            </el-table-column>
            <el-table-column label="通知标题">
              <template #default="scope">
                <el-badge :is-dot="!scope.row.status" class="my-1 d-flex-center pr-2" style="height: 10px;">
                  <span>{{ scope.row.title }}</span>
                </el-badge>
                <!--<div class="overflow-line-clamp-2" :title="scope.row.dataSource">{{ scope.row.dataSource }}</div>-->
              </template>
            </el-table-column>
            <el-table-column label="通知时间" prop="createdAt" />
          </el-table>
          <!--分页-->
          <el-affix target=".c_table-page" position="bottom" :offset="0">
            <yk-pagination class="c_table-pagination-page" :pages="systemPages" @handle="getSystemTableData" />
          </el-affix>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>
